<template>
	<view class="login flex-center">
		<view class="login-box flex-center">
			<!-- <view class="logo">
				<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
			</view> -->
			<form @submit="submitForm">
				<view class="list">
					<view class="title">用户名</view>
					<input type="text" name="username" placeholder="请输入用户名">
				</view>
				<view class="list">
					<view class="title">手机号</view>
					<input type="number" name="phone" placeholder="请输入手机号" v-model="phone">
				</view>
				<view class="list">
					<view class="title">验证码</view>
					<view class="input-box flex">
						<input type="number" placeholder="请输入验证码" name='code'>
						<view class="flex-center code" @click="sendCode">{{codeText}}</view>
					</view>
					
				</view>
				<view class="list">
					<view class="title">密码</view>
					<input name="password" type="password" placeholder="请输入密码">
				</view>
				<button class="flex-center" form-type="submit">注册</button>
				
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeText:"获取验证码",
				isSend:true,
				phone:''
			};
		},
		methods:{
			// 表单提交
			submitForm(e){
				console.log(e)
			},
			// 发送验证码
			sendCode(){
				if(!this.isSend) return; 
				if(!this.phone){
					uni.showToast({
						title:"请输入手机号",
						icon:"none"
					})
					return
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){
					uni.showToast({
						title:"手机号格式有误",
						icon:"none"
					})
					return
				}
				
				this.isSend = false
				let s = 60;
				this.codeText = s + "s后重发"
				let timer = setInterval(()=>{
					this.codeText = --s + "s后重发"
					if(s==0){
						this.isSend =true;
						this.codeText = "重新发送";
						clearInterval(timer)
					}
				},1000)
			}
		}
	}
</script>

<style lang="less">
	@main-color:#039702;
	page{
		background: #fff;
	}
	.login{
		height: calc(100vh - 44px);
		.login-box{
			flex-direction: column;
			.logo{
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			form{
				width: 650rpx;
				margin: 150rpx 0 300rpx;
				.list{
					margin-bottom: 50rpx;
					border-bottom: 2px solid #eee;
					.title{
						font-size: 34rpx;
						font-weight: bold;
					}
					input{
						width: 100%;
						height: 60rpx;
						font-size: 32rpx;
					}
					.code{
						width: 50%;
						font-size: 32rpx;
						padding: 10rpx 0;
						color:@main-color;
					}
					
				}
				button{
					font-size: 34rpx;
					background: @main-color;
					color:white;
					margin-top: 100rpx;
				}
			}
			.bottom{
				width: 650rpx;
				font-size: 32rpx;
				color:@main-color;
			}
		}
	}
</style>
